<template>
    <div class="enter-work-account-approve">
        <div class="account-approve-content-view">
            <div class="account-approve-form">
                <div class="setps">
                    <el-steps :space="200" :active="status" finish-status="success">
                        <el-step title="提交营业执照"></el-step>
                        <el-step title="等待审核"></el-step>
                        <el-step title="审核结果"></el-step>
                    </el-steps>
                </div>
                <template v-if="status == 1">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                        <el-row :gutter="20">
                            <!--  <el-col :span="24">
                                  <el-form-item label="职位名称" prop="name">
                                      <el-input v-model="ruleForm.name"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="24">
                                  <el-form-item label="营业执照号码" prop="name">
                                      <el-input v-model="ruleForm.name"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="24">
                                  <el-form-item label="有效日期" required>
                                      <div class="flex-row-start">
                                          <el-form-item prop="date1">
                                              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                                              style="width: 170px"></el-date-picker>
                                          </el-form-item>
                                          <div class="ml10 mr10">-</div>
                                          <el-form-item prop="date2">
                                              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                                              style="width: 170px"></el-date-picker>
                                          </el-form-item>
                                          <el-form-item class="ml20" label="" prop="type">
                                              <el-checkbox-group v-model="ruleForm.type">
                                                  <el-checkbox label="长期" name="1"></el-checkbox>
                                              </el-checkbox-group>
                                          </el-form-item>
                                      </div>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="24">
                                  <el-form-item label="联系方式" prop="name">
                                      <el-input v-model="ruleForm.name"></el-input>
                                  </el-form-item>
                              </el-col>-->
                            <el-col :span="24">
                                <el-form-item label="营业执照" prop="name">
                                    <el-upload
                                        class="avatar-uploader"
                                        action="#"
                                        :http-request="uploadFaceFiles"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item class="single-item">
                                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                    <el-button>取消</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <template v-if="status == 2">
                    <div class="status-content">
                        <img src="../../../assets/image/enterprise/wait.png" alt="wait">
                        <p class="text-green fs22 mb20">认证资料已提交，等待审核中</p>
                        <p>我们会在1个工作日内审核您提交的资料，请耐心等待...</p>
                    </div>
                </template>
                <template v-if="status == 3">
                    <div class="status-content">
                        <img src="../../../assets/image/enterprise/pass.png" alt="pass">
                        <p class="text-green fs22 mb20">恭喜您，认证已通过</p>
                    </div>
                </template>
                <template v-if="status == 4">
                    <div class="status-content">
                        <img src="../../../assets/image/enterprise/fail.png" alt="pass">
                        <p class="text-red fs22 mb20">很抱歉，您的企业认证未通过</p>

                        <el-button type="primary" class="mt30" @click="status = 1">重新认证</el-button>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import { filesAnon } from '@/api/base'
import { getAuthenticationStatus, submitBusinessLicense } from '@/api/enterprise/work/account'
import { checkResponse } from '@/utils'

export default {
    name: 'enterpriseWorkAccountApprove',
    components: {},
    data() {
        return {
            jobActiveName: 'publish',
            status: 1,
            ruleForm: {
                logo: '',
                attachmentId: 0
                // name: '',
                // region: '',
                // date1: '',
                // date2: '',
                // delivery: false,
                // type: [],
                // resource: '',
                // desc: ''
            },
            rules: {
                /*  name: [
                      { required: true, message: '请输入活动名称', trigger: 'blur' },
                      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  region: [
                      { required: true, message: '请选择活动区域', trigger: 'change' }
                  ],
                  date1: [
                      { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                  ],
                  date2: [
                      { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                  ],
                  type: [
                      { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                  ],
                  resource: [
                      { required: true, message: '请选择活动资源', trigger: 'change' }
                  ],
                  desc: [
                      { required: true, message: '请填写活动形式', trigger: 'blur' }
                  ]*/
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.getAuthenticationStatus()
        },
        getAuthenticationStatus() {
            getAuthenticationStatus().then(res => {
                this.status = res.datas.auditStatus + 2
            })
        },
        submitForm(formName) {
            let app = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    app.submitData()
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        submitData() {
            submitBusinessLicense({ attachmentId: this.ruleForm.attachmentId }).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('操作成功')
                    this.init()
                }
            })

        },
        uploadFaceFiles(params) {
            var vm = this
            const file = params.file,
                fileType = file.type,
                fileName = file.name,
                isImage = fileType.indexOf('pdf') != -1,
                isLt2M = file.size / 1024 / 1024 < 2
            // 这里常规检验，看项目需求而定
            // if (!isImage) {
            //   this.$message.error("只能上传文件格式pdf");
            //   return;
            // }
            // if (!isLt2M) {
            //   this.$message.error("只能上传文件大小小于2M");
            //   return;
            // }
            // 根据后台需求数据格式
            const form = new FormData()
            // 文件对象
            form.append('file', file)
            // 项目封装的请求方法，下面做简单介绍
            filesAnon(form).then(res => {
                this.$set(vm.ruleForm, 'attachmentId', res.id)
                this.$set(vm.ruleForm, 'logo', res.url)
            }).catch(res => {
                //this.$message.error("上传失败，请重新上传");
            })
        },
        handleAvatarSuccess(res, file) {
            this.ruleForm.logo = res.data
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt2M = file.size / 1024 / 1024 < 2;
            //
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        }
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-account-approve {
    background: #FFF;
    padding: 10px 20px;

    .account-approve-content-view {
        width: 600px;
        margin: auto;

        .setps {
            margin: 55px 0 40px 120px;
        }

        .account-approve-form {
            padding-right: 40px;
            position: relative;
            color: $text-default;

            .enterprise-tag {
                display: block;
                margin: 10px 0 30px 0;
            }

            .el-form-item__label {
                color: $text-default !important;
            }

            .checkbox-item {
                .el-form-item__content {
                    margin-left: 0 !important;
                }
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 16px;
                color: #8c939d;
                width: 80px;
                height: 80px;
                line-height: 80px;
                text-align: center;
            }

            .avatar {
                width: 80px;
                height: 80px;
                display: block;
            }
        }

        .status-content {
            text-align: center;
            margin-top: 80px;
            margin-bottom: 150px;

            img {
                width: 74px;
                margin-bottom: 20px;
            }
        }
    }
}
</style>
